<div>
  <div mat-dialog-title>
    <h3>{{ "Connect" | translate }} - {{ asset.name | truncatechars:30 }}</h3>
    <button aria-label="close dialog" mat-dialog-close="" mat-icon-button>
      <mat-icon>close</mat-icon>
    </button>
  </div>

  <div *ngIf="protocols.length === 0">
    <div class="el-alert el-alert--error is-light" role="alert">
      <div class="el-alert__content">
        <p class="el-alert__description">{{ "No protocol available" | translate }}</p>
      </div>
    </div>
  </div>
  <div *ngIf="protocols && protocols.length > 0">
    <nav class="protocol-tab" mat-tab-nav-bar style="margin-bottom: 10px">
      <a (click)="onProtocolChange(p)"
         *ngFor="let p of protocols"
         [active]="protocol.name === p.name"
         [title]="p.name"
         mat-tab-link
      >
        {{ p.name | uppercase }}
      </a>
    </nav>

    <div (keyup.enter)="onConfirm()" class="dialog-body" mat-dialog-content>
      <elements-select-account
        (accountSelectedChange)="onSelectAccount($event)"
        (manualUsernameChanged)="onManualUsernameChanged($event)"
        [accounts]="accounts"
        [asset]="asset"
        [manualAuthInfo]="manualAuthInfo"
        [onSubmit]="onSubmit$"
        [protocol]="protocol"
      >
      </elements-select-account>

      <elements-connect-method
        (onDownloadRDPFile)="onConfirm(true)"
        [(connectMethod)]="connectMethod"
        [account]="accountSelected"
        [connectOption]="connectOption"
        [manualAuthInfo]="manualAuthInfo"
        [protocol]="protocol"
        class="connect-method-zone"
      >
      </elements-connect-method>

      <elements-advanced-option
        [connectMethod]="connectMethod"
        [connectOption]="connectOption"
        [protocol]="protocol"
      >
      </elements-advanced-option>

      <div class="auto-connect">
        <label class="zone-label" style="display: block">{{ "Remember select" | translate }}</label>
        <mat-checkbox [(ngModel)]="autoLogin" name="auto-login">
          {{ "Automatic login next" | translate }}
        </mat-checkbox>
      </div>

      <mat-dialog-actions style="float: right; margin: 8px 0 0 0; width: 100%">
        <button
          (click)="onConfirm()"
          [disabled]="connectButtonInfo().disabled"
          [mat-dialog-close]="outputData"
          class="confirm-btn"
          color="primary"
          mat-raised-button
          type="submit"
        >
          {{ "CONNECT"| translate }}
          <span *ngIf="protocol && protocol.name === 'rdp'" class="online-num">
          ({{ 'Current online' | translate }}: {{ onlineNum === null ? '- ' : onlineNum }})
        </span>
        </button>
        <label class="zone-label" style="display: block">{{ connectButtonInfo().reason }}</label>
      </mat-dialog-actions>
    </div>
  </div>
</div>
